import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'dva';
import styles from '../dashboard/index.less';
import { Steps,Table,Modal,Input,Button ,Icon,Card,Radio,message,DatePicker} from 'antd';
import UPpdateImg from './update';
const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
const {warning,confirm} = Modal;
const RadioGroup = Radio.Group;

import {TimeSpan} from '../../utils';


const Step = Steps.Step;
const Dashboard = ({ dashboard,dashboard:{fist},dispatch, loading }) => {
    let {taskData} = fist;
    // 判断是否显示并返回taskId
    const showDoIt = (arr) =>{
        let taskId = null;
        arr.map(item=>{
            if(item.currentActivity && !item.finished){
                taskId = item.taskId;
            }
        });
        return taskId;
    };
    return(
        <div className={styles.container_list}>
            <PagesPOST dispatch={dispatch} {...dashboard} loading={loading.global}/>
            <h2 style={{padding:20}}>{fist.businessName}
                {/* <a onClick={()=>{
                    dispatch({type:"app/goToPath",payload:'Emergencyplan_list'});
                }} style={{fontSize:12}}>查看详情</a> */}
            </h2>
            <p>
                <span style={{color:'#000',marginRight:30,marginLeft:30}}>预案负责人: {fist.userName}</span>
                <span style={{marginLeft:100,color:'#000',marginRight:30}}>
                    开始时间:{taskData && TimeSpan(taskData[0].startTime).replace("T"," ")}
                </span>
            </p>
            {/*工作流*/}
            <Steps direction="vertical" current={taskData && taskData.length - 1} style={{marginLeft:50}}>
                {
                    taskData && taskData.map((item,index)=>{
                        if (taskData[index].activityType != "startEvent" && taskData[index].activityType != "endEvent"){
                            return (
                                <Step key={index} title={taskData && taskData[index].description} description={
                                    <div style={{display:'flex'}}>
                                        {
                                            taskData && taskData[index].taskDetailsResponses.length == 1?
                                                <div style={{width:170}}>
                                                    {
                                                        taskData && taskData[index].taskDetailsResponses[0].userName
                                                    }
                                                    {
                                                        (taskData && !taskData[index].taskDetailsResponses[0].finished &&
                                                        taskData[index].taskDetailsResponses[0].currentActivity) &&
                                                        <a onClick={()=>{
                                                            dispatch({type:'dashboard/getTaskData',payload:{
                                                                taskId:taskData[index].taskDetailsResponses[0].taskId,
                                                            }});
                                                        }} style={{marginLeft:10}}>处理</a>
                                                    }
                                                </div>:
                                                <div style={{width:170}}>
                                                    {
                                                        showDoIt(taskData[index].taskDetailsResponses) &&
                                                        <a onClick={()=>{
                                                            dispatch({type:'dashboard/getTaskData',payload:{
                                                                taskId:showDoIt(taskData[index].taskDetailsResponses),
                                                            }});
                                                        }} style={{marginLeft:10}}>处理</a>
                                                    }
                                                </div>
                                        }
                                        <div style={{width:"60%",marginTop:-30,zIndex:999}}>
                                            {
                                                taskData && taskData[index].taskDetailsResponses.length == 1?
                                                    <div style={{fontSize:20}}>{
                                                        (taskData && taskData[index].taskDetailsResponses[0].finished &&
                                                        taskData[index].taskDetailsResponses[0].formProperty[0]) &&
                                                        taskData[index].taskDetailsResponses[0].formProperty[0].name + ':' +
                                                        taskData[index].taskDetailsResponses[0].formProperty[0].value
                                                    }</div>:
                                                    <Table bordered pagination={false}
                                                        size="small"
                                                        dataSource={ taskData && taskData[index].taskDetailsResponses}
                                                        rowKey={id => id.taskId}
                                                        columns={[
                                                            {
                                                                title:'负责人',
                                                                dataIndex: 'userName',
                                                            },
                                                            {
                                                                title:'开始时间',
                                                                dataIndex: 'startTime',
                                                                render:text => text && TimeSpan(text).replace("T"," "),
                                                            },
                                                            {
                                                                title:'结束时间',
                                                                dataIndex: 'endTime',
                                                                render:text => text && TimeSpan(text).replace("T"," "),
                                                            },
                                                            {
                                                                title:'任务进度',
                                                                dataIndex: 'finished',
                                                                render:(text,record) => <Button>{text?'已完成':'未开始'}</Button>,
                                                            },
                                                        ]} />

                                            }

                                            <div style={{borderBottom:'1px solid #f5f5f5',width:'150%',height:50}}/>
                                        </div>
                                    </div>
                                } />
                            );
                        }else {
                            return(
                                <Step key={index} title={index == 0?fist.processDefinitionName:'完成'} description={
                                    <div style={{display:'flex'}}>
                                        <div style={{width:170}}></div>
                                        {
                                            (taskData && taskData[index].formProperty.length > 0) &&
                                            <div style={{width:"60%",marginTop:-30,zIndex:999}}>
                                                <b>{taskData && taskData[index].formProperty[0].name}:</b><span></span>
                                                <p style={{marginLeft:20}}>{taskData && taskData[index].formProperty[0].value}</p>
                                                <b>{taskData && taskData[index].formProperty[1].name}:</b>
                                                <p style={{marginLeft:20}}>{taskData && taskData[index].formProperty[1].value}</p>
                                                <div style={{borderBottom:'1px solid #f5f5f5',width:'150%'}}/>
                                            </div>
                                        }
                                    </div>
                                } />
                            );
                        }
                    })
                }
            </Steps>
        </div>
    );};


class PagesPOST extends React.Component {


    constructor (props){
        super(props);
        this.state ={
            cover:[''],
            fileListimg:[[]],
            cover_1:'',
            fileListimg_1:[],
            cover_2:'',
            fileListimg_2:[],
        };
    }

    componentWillMount () {
        this.props.dispatch({type:'dashboard/getworkingList',payload:{
            processInstanceId:localStorage.getItem('id_working'),
        }});
    }
    render (){
        let {
            outcomesView,
            outcomes,
            taskId,
            contentValue,
            loading,
            outcomesView_1,
            outcomesView_2,
            outcomesView_3,
            Allarr,
        } = this.props;
        return <div>
            {/*演练计划题目表单*/}
            {outcomesView_1 &&
                <Modal
                    title={<div>
                        <Icon style={{color:'#faad14',fontSize:24,marginRight:20}} type="question-circle" />
                        <span style={{fontSize:20}}>{outcomes.name}</span>
                        <Icon onClick={()=>this.props.dispatch({type:'dashboard/save',payload:{outcomesView_1:false}})}
                            style={{color:'aaa',float:'right'}} type="close" />
                    </div>}
                    width={700}
                    maskClosable={false}
                    confirmLoading={loading}
                    keyboard={false}
                    closable={false}
                    visible={outcomesView_1}
                    onOk={()=>{
                        outcomes.exampleList.map((item_1,index_1) =>{
                            if(outcomes.exampleList.length -1 == index_1){
                                item_1.exampleList.map((item,index)=>{
                                    if(item.example_type==1 && item.chooseDetailsId && item_1.exampleList.length -1 == index){
                                        let body = {
                                            "taskId":taskId,
                                            "id":  localStorage.getItem('id'), //-- 演练计划ID
                                            "exampleList":outcomes.exampleList,
                                        };
                                        this.props.dispatch({type:'dashboard/postTaskData',payload:body});
                                    }else if(item.example_type==1 && !item.chooseDetailsId){
                                        return message.warning('未填写完整!');
                                    }
                                });

                            }else {
                                item_1.exampleList.map((item)=>{
                                    if(item.example_type == 1 && !item.chooseDetailsId){
                                        return message.warning('未填写完整!');
                                    }
                                });
                            }
                        });
                    }}
                    onCancel={()=>{
                        this.props.dispatch({type:"dashboard/save",payload:{outcomesView_1:false}});
                    }}
                    okText='确定'
                    cancelText='取消'
                >
                    {
                        outcomes.exampleList.map((item,index) =>{
                            return <div key={index}>
                                <Card
                                    title={item.catalog_name}
                                >
                                    {
                                        item.exampleList.map(item_1 =>{
                                            return <div key={item_1.id}>
                                                <div style={{marginTop:10}}>{item_1.example_name}</div>
                                                <p style={{color:item_1.example_type == 1?'red':'#aaa'}}>
                                                    {item_1.example_type == 1?'必选':'非必选'}
                                                </p>
                                                <RadioGroup onChange={(e)=>{
                                                    console.log(e.target.value);
                                                    item_1.chooseDetailsId = e.target.value;
                                                }} >
                                                    {
                                                        item_1.details && item_1.details.map(i=>{
                                                            return <Radio key={i.id} value={i.id}>{i.detail_name} {i.detail_num}分</Radio>;
                                                        })
                                                    }
                                                </RadioGroup>
                                            </div>;
                                        })
                                    }

                                </Card>
                            </div>;
                        })
                    }
                </Modal>}
            {/*预案整改措施*/}
            {outcomesView_2 &&
                <Modal
                    title={<div>
                        <Icon style={{color:'#faad14',fontSize:24,marginRight:20}} type="question-circle" />
                        <span style={{fontSize:20}}>{outcomes.name}</span>
                        <Icon onClick={()=>this.props.dispatch({type:'dashboard/save',payload:{outcomesView_2:false}})}
                            style={{color:'aaa',float:'right'}} type="close" />
                    </div>}
                    maskClosable={false}
                    confirmLoading={loading}
                    keyboard={false}
                    closable={false}
                    visible={outcomesView_2}
                    style={{top:'2vh'}}
                    onOk={()=>{
                        if (this.props.contentValue_2 && this.props.contentValue_1){
                            let {contentValue_7,contentValue_6,contentValue_5,contentValue_4,contentValue_3,fileListimg_2,fileListimg_1} = this.state;
                            let imageArray = [],userImageArray=[];
                            fileListimg_2.map(item=>{
                                imageArray.push(item.response.data);
                            });
                            fileListimg_1.map(item=>{
                                userImageArray.push(item.response.data);
                            });
                            let body ={
                                "taskId":taskId,
                                "id":  localStorage.getItem('id'), //-- 演练计划ID
                                "re_time":contentValue_7,
                                "chief":contentValue_5,
                                "scene_chief":contentValue_6,
                                "depart":contentValue_4,
                                "location":contentValue_3,
                                "planToDo":this.props.contentValue_2,
                                "hadQuestion":this.props.contentValue_1,
                                "imageArray":imageArray,
                                "userImageArray":userImageArray,
                            };
                            this.props.dispatch({type:'dashboard/postTaskData',payload:body});
                        }else {
                            message.warning('未填写完整!');
                        }
                    }}
                    onCancel={()=>{
                        this.props.dispatch({type:"dashboard/save",payload:{outcomesView_2:false}});
                    }}
                    okText='确定'
                    cancelText='取消'
                >
                    <div style={{height:"70vh",overflow:'auto',padding:10}}>
                        <Input style={{marginBottom:10}} value={this.state.contentValue_3} onChange={e=>{
                            this.setState({
                                contentValue_3:e.target.value,
                            });
                        }} placeholder='请输入演练地点'/>
                        <DatePicker style={{marginBottom:10}} onChange={(date, dateString)=>{
                            this.setState({
                                contentValue_7:dateString,
                            });
                        }} placeholder='请选择演练时间'/>
                        <Input style={{marginBottom:10}} value={this.state.contentValue_4} onChange={e=>{
                            this.setState({
                                contentValue_4:e.target.value,
                            });
                        }} placeholder='请输入演练参与部门'/>
                        <Input style={{marginBottom:10}} value={this.state.contentValue_5} onChange={e=>{
                            this.setState({
                                contentValue_5:e.target.value,
                            });
                        }} placeholder='请输入总指挥'/>
                        <Input style={{marginBottom:10}} value={this.state.contentValue_6} onChange={e=>{
                            this.setState({
                                contentValue_6:e.target.value,
                            });
                        }} placeholder='请输入现场总指挥'/>
                        <div style={{fontSize:18}}>签到信息</div>
                        <UPpdateImg name="3" fileList={this.state.fileListimg_1} getUrl={e=>{
                            e[0] && this.setState({
                                cover_1:e[0].response && e[0].response.data,
                                fileListimg_1:e,
                            });
                        }}/>
                        <div style={{fontSize:18}}>现场演练照片</div>
                        <UPpdateImg name="3" fileList={this.state.fileListimg_2} getUrl={e=>{
                            e[0] && this.setState({
                                cover_2:e[0].response && e[0].response.data,
                                fileListimg_2:e,
                            });
                        }}/>
                        <div style={{fontSize:18}}>应急演练总结表</div>
                        <Input.TextArea rows={8} value={this.props.contentValue_1} onChange={e=>{
                            this.props.dispatch({type:"dashboard/save",payload:{contentValue_1:e.target.value}});
                        }} placeholder='请输入'/>
                        <div style={{marginTop:10,fontSize:18}}>演练存在的问题描述</div>
                        <Input.TextArea rows={8} value={this.props.contentValue_2} onChange={e=>{
                            this.props.dispatch({type:"dashboard/save",payload:{contentValue_2:e.target.value}});
                        }} placeholder='请输入'/>
                    </div>

                </Modal>
            }
            {/*整顿反馈*/}
            {outcomesView_3 &&
            <Modal
                title={<div>
                    <Icon style={{color:'#faad14',fontSize:24,marginRight:20}} type="question-circle" />
                    <span style={{fontSize:20}}>{outcomes.name}</span>
                    <Icon onClick={()=>this.props.dispatch({type:'dashboard/save',payload:{outcomesView_3:false}})}
                        style={{color:'aaa',float:'right'}} type="close" />
                </div>}
                maskClosable={false}
                confirmLoading={loading}
                keyboard={false}
                closable={false}
                visible={outcomesView_3}
                onOk={()=>{
                    // console.log(222,'img',this.state.fileListimg,'arr',Allarr)
                    let AllarrIt = Allarr.notempty();
                    let fileListimgIt = this.state.fileListimg.notempty();
                    fileListimgIt.map((item,index)=>{
                        if(item.length ==0){
                            AllarrIt[index].imageArray = [];
                            AllarrIt[index].title = AllarrIt[index].contentValue;
                            AllarrIt[index].imageArray.push('');
                        }else {
                            AllarrIt[index].imageArray = [];
                            AllarrIt[index].title = AllarrIt[index].contentValue;
                            item.map(i => {
                                AllarrIt[index].imageArray.push(i.response.data);
                            });
                        }

                    });
                    AllarrIt.map((item,index) =>{
                        if(item.title && item.imageArray.length > 0 && AllarrIt.length -1 == index){
                            let body = {
                                "taskId":taskId,
                                "id":  localStorage.getItem('id'), //-- 演练计划ID
                                "feedback": Allarr,
                            };
                            this.props.dispatch({type:'dashboard/postTaskData',payload:body});
                        }else if(!item.title || item.imageArray.length == 0 ){
                            message.warning('未填写完整!');
                        }
                    });
                }}
                onCancel={()=>{
                    this.props.dispatch({type:"dashboard/save",payload:{outcomesView_3:false}});
                }}
                okText='确定'
                cancelText='取消'
            >
                {
                    Allarr.map((item,index)=>{
                        return <div key={index}>
                            <Input.TextArea rows={2} value={item.contentValue} onChange={e=>{
                                Allarr[index].contentValue = e.target.value;
                                this.props.dispatch({type:"dashboard/save",payload:{Allarr:Allarr}});
                            }} placeholder='请输入'/>
                            {
                                index == 0?"":<a style={{marginTop:20}} onClick={()=>{
                                    delete Allarr[index];
                                    let fileListimg = this.state.fileListimg;
                                    let cover = this.state.cover;
                                    delete fileListimg[index];
                                    delete cover[index];
                                    this.setState({
                                        cover:cover,
                                        fileListimg:fileListimg,
                                    });
                                    this.props.dispatch({type:"dashboard/save",payload:{Allarr:Allarr}});
                                }}>删除</a>
                            }
                            <div style={{zIndex:9999,display:'flex',marginBottom:40}}>
                                <UPpdateImg name="3" fileList={this.state.fileListimg[index]} getUrl={e=>{
                                    if ( e[0]){
                                        let cover = this.state.cover;
                                        let fileListimg = this.state.fileListimg;
                                        cover[index] = e[0].response && e[0].response.data;
                                        fileListimg[index] = e;
                                        this.setState({
                                            cover:cover,
                                            fileListimg:fileListimg,
                                        });
                                    }
                                }}/>

                            </div>
                        </div>;
                    })

                }

                <Button onClick={()=>{
                    Allarr.push({});
                    this.props.dispatch({type:"dashboard/save",payload:{Allarr:Allarr}});
                }} type="dashed" style={{width:"100%"}}>+添加记录</Button>
            </Modal>
            }
            {/*通用表单*/}
            {outcomesView && <Modal
                title={<div>
                    <Icon style={{color:'#faad14',fontSize:24,marginRight:20}} type="question-circle" />
                    <span style={{fontSize:20}}>{outcomes.name}</span>
                    <Icon onClick={()=>this.props.dispatch({type:'dashboard/save',payload:{outcomesView:false}})}
                        style={{color:'aaa',float:'right'}} type="close" />
                </div>}
                maskClosable={false}
                confirmLoading={loading}
                keyboard={false}
                closable={false}
                visible={outcomesView}
                onOk={()=>{
                    this.props.dispatch({type:'dashboard/postTaskData',payload:{
                        "taskId":taskId,
                        "formDefinitionId": outcomes.formDefinitionId,
                        "outcome": "true",
                        "variables": outcomes.fields[0]?[
                            {
                                "name": outcomes.fields[0].id,
                                "type": "json",
                                "value":contentValue,
                            },
                        ]:[],
                    }});
                }}
                onCancel={()=>{
                    if(outcomes.outcomes.length == 0){
                        return;
                    }
                    this.props.dispatch({type:'dashboard/postTaskData',payload:{
                        "taskId":taskId,
                        "formDefinitionId":outcomes.formDefinitionId,
                        "outcome": "false",
                        "variables": outcomes.fields[0]?[
                            {
                                "name": outcomes.fields[0].id,
                                "type": "json",
                                "value":contentValue,
                            },
                        ]:[],
                    }});
                }}
                okText={outcomes.outcomes.length == 0?'确定':outcomes.outcomes[0].name}
                cancelText={outcomes.outcomes.length == 0?'取消':outcomes.outcomes[1].name}
            >
                {
                    outcomes.fields.length > 0 && <div>
                        <p>{outcomes.fields[0].name}</p>
                        <Input.TextArea value={contentValue} onChange={e=>{
                            this.props.dispatch({type:"dashboard/save",payload:{contentValue:e.target.value}});
                        }} placeholder='请输入'/>
                    </div>
                }

            </Modal>}
        </div>;
    }

    componentWillReceiveProps (nextProps) {

    }

}


Dashboard.propTypes = {
    dashboard: PropTypes.object,
    loading: PropTypes.object,
    dispatch: PropTypes.func,
};

export default connect(({ dashboard, loading }) => ({ dashboard, loading }))(Dashboard);